<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小码商城管理平台</title> <#include "../common/header.ftl"/>
    <link rel="stylesheet" href="/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="/js/plugins/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/js/plugins/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script src="/js/addel.jquery.js"></script>
    <script>
        var zTreeObj;
        var setting = {
            async: {
                enable: true,
                url: "/catalog/get",
                autoParam: ["id"]
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            var panel = $("#skuPropertyPanel");
            panel.empty();
            panel.load("/skuProperty/get/" + treeNode.id);
        }

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#catalogTree"), setting);
        });

        //删除sku属性
        function deletekuProperty(skuPropertyId) {
            $.messager.confirm("温馨提示", "请问您确定删除吗?", function () {
                $.get("/skuProperty/delete?skuPropertyId=" + skuPropertyId, function (data) {
                    if (data.success) {
                        $.messager.popup(data.msg);
                    } else {
                        $.messager.popup(data.msg);
                    }
                }, 'json');
                window.location.reload();
            })
        }

        //编辑/新增sku属性按钮,加载新增弹出框
        function addSkuProperty(skuPropertyId, cloumNum) {
            console.log(zTreeObj.getSelectedNodes()[0].id);
            $("#skuPropertyValueForm").load("skuProperty/save?id=" + skuPropertyId
                    + "&catalogId=" + zTreeObj.getSelectedNodes()[0].id
                    + "&sequence=" + cloumNum);
            $("#propertyValueModal").modal("show");
        }
        //保存sku属性按钮
        function saveSkuProperty() {
            $("#skuPropertyValueForm").ajaxSubmit({
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $.messager.popup(data.msg);
                    } else {
                        $.messager.popup(data.msg);
                    }
                    $("#editProduct").modal("hide");
                    window.location.reload();
                }
            });
        }
        //查看属性
        function showProperty(skuPropertyId) {
            $("#showSkuPropertyValue").load("/skuPropertyValue/show/" + skuPropertyId);
            $("#showSkuPropertyModal").modal("show");
        }


        //关闭模态框,保存修改的sku属性值
        function submitSkuValueForm(){
            $("[class='addel']").ajaxSubmit({
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
//                        $.messager.popup(data.msg);
                    } else {
//                        $.messager.popup(data.msg);
                    }
                    $("#editProduct").modal("hide");
                    window.location.reload();
                }
            });
        }

    </script>
</head>
<body>
<div class="container">
<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#assign currentMenu="skuProperty" />
			<#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>sku属性管理</h3>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <ul id="catalogTree" class="ztree"></ul>
                </div>
                <div class="col-sm-8" id="skuPropertyPanel"></div>
            </div>
        </div>
    </div>


    <!-- 新增分类属性值模态框 -->
    <div class="modal fade" id="propertyValueModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                <#--<h4 class="modal-title" id="myModalLabel">分类属性值</h4>-->
                </div>
                <!-- 提交添加分类属性值的表单 -->
                <form class="form-horizontal" action="/skuProperty/add" method="post" id="skuPropertyValueForm">

                </form>
            </div>
        </div>
    </div>

    <!-- 查看分类属性模态框 -->
    <div class="modal fade" id="showSkuPropertyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">分类属性值</h4>
                </div>
                <div class="modal-body" id="showSkuPropertyValue">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="submitSkuValueForm()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>